<template>
  <div class="user-index">
    <!-- 顶部欢迎Banner -->
    <el-card class="banner">
      <h2>欢迎来到网上花店商城！</h2>
      <p>为您提供优质花卉、贴心服务、快速配送，愿美好常伴您身边。</p>
    </el-card>

    <!-- 轮播图 -->
    <el-carousel height="260px" class="carousel">
      <el-carousel-item v-for="(img, idx) in carouselImgs" :key="idx">
        <img :src="img" class="carousel-img" />
      </el-carousel-item>
    </el-carousel>

    <!-- 公告预览 -->
    <el-card class="notice-card">
      <div class="notice-header">
        <h3><i class="el-icon-bell"></i> 最新公告</h3>
      </div>
      <div class="notice-list">
        <div v-for="item in announcements" :key="item.id" class="notice-item" @click="showNoticeDetail(item)">
          <div class="notice-item-header">
            <el-tag size="mini" type="warning">公告</el-tag>
            <span class="notice-title">{{ item.title }}</span>
            <span class="notice-time">{{ formatTime(item.createTime) }}</span>
          </div>
          <div class="notice-content">{{ item.content.slice(0, 100) }}{{ item.content.length > 100 ? '...' : '' }}</div>
        </div>
        <div v-if="announcements.length === 0" class="notice-empty">
          暂无公告
        </div>
      </div>
    </el-card>

    <!-- 热门推荐商品 -->
    <el-card class="hot-goods-card">
      <h3>热门推荐</h3>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(g, idx) in hotGoods" :key="g.id">
          <el-card class="hot-goods-item">
            <img :src="g.img_guid" class="hot-goods-img" />
            <div class="hot-goods-info">
              <el-tag>{{g.name}}</el-tag>
              <div class="hot-goods-price">￥{{g.price}}</div>
              <div class="hot-goods-detail">{{g.detail}}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 快捷入口 -->
    <el-row class="quick-entry">
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-goods" @click="$router.push('/user/goods')">去逛商品</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="success" icon="el-icon-user" @click="$router.push('/user/updateInfo')">个人信息</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="warning" icon="el-icon-s-order" @click="$router.push('/user/order')">我的订单</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="danger" icon="el-icon-shopping-cart-2" @click="$router.push('/user/cart')">购物车</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselImgs: [
        require('@/assets/imgs/gonggao1.jpg'),
        require('@/assets/imgs/gonggao2.jpg'),
        require('@/assets/imgs/90.jpg'),
      ],
      announcements: [],
      hotGoods: [],
    }
  },
  methods: {
    loadAnnouncements() {
      this.$http.get('/announcement/list').then(res => {
        if (res.data.code === 2000) {
          this.announcements = res.data.data.slice(0, 3);
        }
      });
    },
    loadHotGoods() {
      this.$http.get('/flower/find?page=1&searchKey=&searchType=').then(res => {
        if (res.data.code === 2000) {
          this.hotGoods = res.data.data.items.slice(0, 4);
        }
      });
    },
    formatTime(time) {
      if (!time) return '';
      const date = new Date(time);
      return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {hour12: false});
    },
    showNoticeDetail(notice) {
      this.$alert(notice.content, notice.title, {
        confirmButtonText: '确定',
        callback: action => {}
      });
    }
  },
  created() {
    this.loadAnnouncements();
    this.loadHotGoods();
  }
}
</script>

<style scoped>
.user-index {
  height: calc(100vh - 60px);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  background: #f9fbe7;
  text-align: center;
  margin-bottom: 20px;
}

.banner h2 {
  margin: 0;
  padding: 10px 0;
  color: #303133;
}

.banner p {
  margin: 0;
  padding-bottom: 10px;
  color: #606266;
}

.carousel {
  margin-bottom: 30px;
}

.carousel-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
}

.notice-card {
  margin-bottom: 30px;
}

.notice-header {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.notice-header h3 {
  margin: 0;
  color: #303133;
}

.notice-header h3 i {
  color: #E6A23C;
  margin-right: 5px;
}

.notice-list {
  padding: 10px 0;
}

.notice-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
}

.notice-item:hover {
  background-color: #f9f9f9;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.notice-title {
  font-weight: bold;
  margin: 0 8px;
  flex: 1;
}

.notice-time {
  color: #909399;
  font-size: 12px;
}

.notice-content {
  color: #606266;
  font-size: 13px;
  line-height: 1.6;
  margin-left: 50px;
}

.notice-empty {
  text-align: center;
  color: #909399;
  padding: 30px 0;
  font-size: 14px;
}

.hot-goods-card {
  margin-bottom: 30px;
}

.hot-goods-card h3 {
  margin: 0 0 20px 0;
  color: #303133;
}

.hot-goods-item {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.hot-goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.hot-goods-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
}

.hot-goods-info {
  padding: 14px;
}

.hot-goods-price {
  color: #ff6a00;
  font-size: 18px;
  margin: 10px 0;
}

.hot-goods-detail {
  color: #666;
  font-size: 13px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.quick-entry {
  margin: 30px 0;
  text-align: center;
}

.quick-entry .el-button {
  width: 120px;
  margin: 10px 0;
}
</style>
